
<template>
  <div class="box">
    <van-skeleton
      title
      avatar
      :row="3"
      :loading="loading"
    >
      <div class="print-documents vehicle">
        <div class="car-info" v-if="orderList.length>0">
          <div v-for="(items,index) in orderList" :key="items.id">
            <div class="clearfix top">
              <img class="fl" src="@/assets/img/icon/car.png" />
              <div class="fl center">
                <p>
                  <span class="title">客户姓名：</span>
                  <span>{{items.username}}</span>
                </p>
                <p>
                  <span class="title">号牌号码：</span>
                  <span>{{items.carNum}}</span>
                </p>
                <p v-if="items.orderType">
                  <span class="title">车检类型：</span>
                  <span>{{items.orderType === 1?'综检':items.orderType === 2?'综检':'其他类别检测'}}</span>
                </p>
                <p v-else>
                  <span class="title">车检类型：</span>
                  <span>{{items.type === 3?'到场检测':'预约检测'}}</span>
                </p>
                <p>
                  <span class="title">提交时间：</span>
                  <span>{{items.createTime.substring(0,10)}}</span>
                </p>
                <!-- <p>
                  <span class="title">车检进度：</span>
                  <span>{{items.carNum}}</span>
                </p> -->
              </div>
              <div class="fr">
                <p v-if="stateFn(items)" class="print" @click="printClick(items,index)">{{stateFn(items)}}</p>
                <van-button :loading="btnLoading" v-if="stateFn(items) != '点击缴费'" size="mini" class="print" @click="electronicOrderClick(items.id)" round type="info">电子单据</van-button>
              </div>
            </div>
            <div class="bottom clearfix">
              <div class="fl">
                <p>车辆类型</p>
                <p>{{items.carType}}</p>
              </div>
              <span class="fl"></span>
              <div class="fl">
                <p>燃油类型</p>
                <p>{{items.statusStr}}</p>
              </div>
              <span class="fl"></span>
              <div class="fl">
                <p>注册时间</p>
                <p v-if="items.carRegNum">{{items.carRegNum.substring(0,4)+'年'+items.carRegNum.substring(4,6)+'月'+items.carRegNum.substring(6)+'日'}}</p>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="no_data">
          <p>当前无可打印订单...</p>
          <p>如需办理年检业务</p>
          <p>请您在预约检测或到场检测提交车辆信息后重试</p>
        </div>
      </div>
      <!-- <van-image-preview
      :closeable='true'
      v-model="show"
      :images="images"
      @change="onChange"
      maxZoom='5'
      >
        <template v-slot:index>
          <p class="tips">第{{index}}页 共{{images.length}}页</p>
          <p class="tips">双击可放大图片</p>
        </template>
      </van-image-preview> -->
    </van-skeleton>
    <foot :navUrl="url"/>
  </div>
</template>

<script>
import { getLocal } from '@/utils/storage'
import foot from '@/views/footer.vue'
export default {
  data() {
    return {
      carUser: JSON.parse(getLocal('userInfo')),
      orderList: [],
      orderState: [],
      loading:true,
      url:'/',
      show: false,
      index: 1,
      images: [],
      btnLoading:false,
      list:[]
    }
  },
  mounted() {
    
    this.dataDir('carOrderStatus')
    this.queryOrder()
    document.getElementsByTagName('html')[0].style.backgroundColor = '#f5f6f5'
  },
  methods: {
    // 车检数据查询
    async queryOrder() {
      let params = {
        userId: this.carUser.id
      }
      let res = await this.$api.queryOrder(params)
      console.log('------------------- 车检数据查询 ----------------',res)
      this.loading = false
      if (res) {
        let data = res.data
        if (data && data.list.length !== 0) {
          this.orderList = data.list
          this.list = data.carUserCoupons
        } else {

        }
      }
    
    },
    // 获取车辆数据字典
    async dataDir(e) {
      let res = await this.$api.dataDir({
        type: e
      })
      console.log(res, '------------------- 获取车辆数据字典 ----------------')

      if (res.status === 200 && res.data) {
        console.log(JSON.stringify(res.data.list))
        this.orderState = res.data.list
      }
    },
    printClick(els, index) {
      els.list = this.list
      console.log(els)
      if (els.status === 40) {
        this.$toast('您已经打印过咯！')
        return
      }
      if (els.status <= 20) {
        this.$toast('您还没有支付！')
        this.$router.push({
            name: 'orderPay',
            params: {
              carInfo: els
            }
          })
      }
      if (els.status >= 25 && els.status <= 35) {
        /* this.$router.push({
          name: 'printDetails',
          params: {
            carInfo: els
          }
        }) */
        this.$router.push({ path: 'printDetails', query: {createTime:els.createTime,times:els.times,timeSub:els.timeSub,type:els.type,orderType:els.orderType,carNum:els.carNum,id:els.id}})
      }
    },
    // 工具
    stateFn(row) {
      // 单据打印完成
      if (row.status >= 25 && row.status <= 35) {
        return '打印单据'
      }

      // 还没支付
      if (row.status <= 20) {
        return '点击缴费'
      }

      // 订单完成
      if (row.status >= 60) {
        return '点击评价'
      }

      // return row.status
    },
    //电子单据
    async electronicOrderClick(v){
      console.log('电子单据',v)
      this.btnLoading = true
      let res = await this.$api.createPDF({
        orderId: v
      })
      console.log(res, '------------------- 获取车辆数据字典 ----------------')
      if (res.status === 200) {
        /* if (res.data.list) {
          this.images = res.data.list
          this.show = true
        }else{
          this.show = false
          this.$toast(res.data.message)
        } */
        this.$router.push({
          name: 'pdf',
          params: {
            data: res.data
          }
        })
        console.log('this.images------------------',this.images)
      }
      
      this.btnLoading = false
      /* this.$router.push({
        name: 'electronicOrder',
        params: {
            id:v
        }
      }) */
    },
    onChange(index) {
      this.index = index+1;
    }
  },
  components:{
    foot
  },
  
  beforeRouteLeave(to, from, next) {
    
    document.getElementsByTagName('html')[0].style.backgroundColor = '#fff'
    next()
  }
}
</script>

<style lang="less" scoped>
body {
  background-color: #f5f6f5;
}
.tips{
  font-size: 0.35rem;
  text-align: center;
  line-height: 0.8rem;
}
.print-documents {
  margin-bottom: 0.133rem;
  .car-info .top .fr .print{
    width: 2rem;
    height: 0.75rem;
    line-height: 0.75rem;
    border-radius: 0.4rem;
    font-size: 0.373rem;
    margin-top: 0.2rem;
  }
  .car-info .top .fr p.print {
    width: 2rem;
    height: 0.75rem;
    line-height: 0.75rem;
    border-radius: 0.4rem;
    font-size: 0.373rem;
    margin-top: 0.2rem;
  }
}
.no_data{
  width: 84%;
  margin:0.75rem auto;
  font-size:0.373rem;
  line-height: 0.6rem;
  text-align: center;
  color:#999;
}
.car-info .top{
  height: 3rem;
}
.car-info .top img{
      margin: 0.853rem 0 0 0.4rem;
}
.car-info .top .center {
    margin: 0.3rem 0 0 0.3rem;
    font-size: 0.3rem;
    line-height: 0.55rem;
    .title{
      font-size: 0.35rem;
    }
}
</style>